<template>
  <div class="box">
    <el-table :data="dataList"  height="calc(80vh - 325px)"  @selection-change="selectChange"  >
      <el-table-column label="追溯码/批次号" width="600">
        <template #default="scope">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入Z开头的追溯码或者批次号或者生产任务号"
              v-model.trim="scope.row.traceBackNo"
              maxlength="65"
              show-word-limit
          >
          </el-input>
        </template>
      </el-table-column>
      <!--      <el-table-column label="箱号" width="160" prop="boxNo"></el-table-column>-->
      <!--      <el-table-column label="物料" width="120" prop="materialNo"></el-table-column>-->
      <el-table-column width="160" label="操作">
        <template #default="scope">
          <el-button type="success"  size="small" @click="selectRow(scope.$index, scope.row)">查看</el-button>
          <el-button type="warning" size="small" icon="el-icon-download" @click="doDownload(scope.$index, scope.row)">导出</el-button>
        </template>

      </el-table-column>
    </el-table>

    <div>
      <el-table :data="infoList"  height="calc(100vh - 325px)"  >
        <el-table-column label="No." width="60" align="right" type="index"></el-table-column>
        <el-table-column label="箱号" width="180" prop="boxNo"></el-table-column>
        <el-table-column label="销售渠道" width="160" prop="saleChnnel"></el-table-column>
        <el-table-column label="销售时间" width="180" prop="saleTime"></el-table-column>
        <el-table-column label="销售单号" width="180" prop="tradeNo"></el-table-column>
        <el-table-column label="接收方" width="120" prop="receive"></el-table-column>
        <el-table-column label="发货方" width="180" prop="issue"></el-table-column>
        <el-table-column label="调拨单号" width="120" prop="allocateNo"></el-table-column>
        <el-table-column label="调拨时间" width="120" prop="allocateTime"></el-table-column>
        <el-table-column label="唯一码" width="180" prop="traceabilityCode"></el-table-column>


      </el-table>
    </div>
  </div>

</template>

<script>

export default {
  name: "selectSerialTrade",
  data() {
    return {
      loading:false,
      dataList:[{traceBackNo:"",boxNo:"",materialNo:"",}],
      infoList:[]
    }
  },
  methods:{
    async doDownload(index,row) {
      this.loading = true
      try {
        let param = {traceBackNo : this.dataList[index].traceBackNo}
        let res = await this.callApi('download_serial_trade', param)
        if (!res.res) return
      } finally {
        this.loading = false
      }
    },
    async selectRow(index,row){
      this.loading = true
      let param = {traceBackNo : this.dataList[index].traceBackNo}
      try {
        let res = await this.callApi('get_serial_trade',param)
        if (!res.res) return
        // this.dataList[index].boxNo = res.data.boxNo
        // this.dataList[index].materialNo = res.data.materialNo
        this.infoList = res.dataList
      }finally {
        this.loading = false
      }
    }
  }

}
</script>

<style scoped>

</style>